<template>
  <div class="container">
    <el-form
      label-width="80px"
      :rules="rules"
      :model="data"
      ref="baseDataForm"
      :show-message="false"
    >
      <div class="message-input-container">
        <div class="middle-box">
          <span class="label"> 订舱信息 </span>
          <span class="fold" @click="foldService">{{
            serviceInfoIsShow ? '收起' : '展开'
          }}</span>
        </div>
        <div v-show="serviceInfoIsShow">
          <div class="no-data" v-if="showBookingSearch">暂无订舱信息</div>
          <div v-else>
            <docBookingEdit
              v-if="showBookingInput"
              v-model:detailData="data"
              :initOption="initOption"
            ></docBookingEdit>
            <docBookingQuery :detailData="data" v-else></docBookingQuery>
          </div>
        </div>
      </div>

      <div class="message-input-container">
        <div class="middle-box">
          <span class="label"> 委托信息 </span>
          <span class="fold" @click="foldAllocation">{{
            allocationInfoIsShow ? '收起' : '展开'
          }}</span>
        </div>

        <div v-show="allocationInfoIsShow">
          <docEntrustingUnitEdit
            v-if="disPlayRuels"
            v-model:detailData="data"
            :isBooking="isBooking"
            :initOption="initOption"
            ref="docEntrustingUnitEditRef"
          ></docEntrustingUnitEdit>
          <docEntrustingUnitQuery
            :detailData="data"
            v-else
            ref="docEntrustingUnitEditRef"
          ></docEntrustingUnitQuery>
        </div>
      </div>
    </el-form>
    <docDetailFillShipperNew ref="BLDialog" @choose="getBLTitle">
    </docDetailFillShipperNew>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
// import selectDown from './../components/selectDown.vue'
import selectDown from './selectDownNew.vue'
import docEntrustingUnitEdit from './docEntrustingUnitEdit.vue'
import docBookingEdit from './docBookingEdit.vue'
import docBookingQuery from './docBookingQuery.vue'
import docEntrustingUnitQuery from './docEntrustingUnitQuery.vue'
import docSelects from './../components/docSelects.vue'
import docDetailFillShipperNew from './docDetailFillShipperNew.vue'
import docDetailBaseBLHistoryDialog from './../components/docDetailBaseBLHistoryDialog.vue'
import {
  ArrowDown,
  CircleClose,
  CircleCloseFilled
} from '@element-plus/icons-vue'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'
export default defineComponent({
  components: {
    selectDown,
    docSelects,
    docBookingQuery,
    docEntrustingUnitEdit,
    docBookingEdit,
    docEntrustingUnitQuery,
    docDetailFillShipperNew,
    ArrowDown,
    CircleClose,
    CircleCloseFilled,
    docDetailBaseBLHistoryDialog
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //初始化option
    initOption: {
      type: Object,
      default: () => {}
    },
    //验证是否可以现在填写页面
    disPlayRuels: {
      type: Boolean,
      default: false
    },
    // 暂无和订舱信息
    showBookingSearch: {
      type: Boolean,
      default: false
    },
    // 是否显示订舱输入页面
    showBookingInput: {
      type: Boolean,
      default: false
    },
    // 是否已订舱
    isBooking: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:detailData'],
  computed: {
    data: {
      get() {
        return this.detailData
      },
      set(value) {
        this.$emit('update:detailData', value)
      }
    },
    // 控制订舱内容是否显示
    showHasBooking: () => {}
  },
  data() {
    return {
      formData: {},
      inkey: 0,
      yxlx: '海运出口',
      // 业务信息是否展示
      serviceInfoIsShow: true,
      // 配舱信息是否展示
      allocationInfoIsShow: true,
      // 用箱信息是否展示
      useBoxInfoIsShow: true,
      // 货物信息是否展示
      goodsInfoIsShow: true,
      // 订舱人信息是否展示
      bookerInfoIsShow: true,
      // 我司操作业务人员
      operateInfoIsShow: true,
      expand: false,
      num: 1,
      isFirst: true,
      rules: {
        blno: [{ required: true, message: '请输入', trigger: 'blur' }],
        vessel: [{ required: true, message: '请输入', trigger: 'change' }],
        voyage: [{ required: true, message: '请输入', trigger: 'change' }],
        atd: [{ required: true, message: '请输入', trigger: 'change' }],
        requester: [{ required: true, message: '请输入', trigger: 'change' }],
        cargoType: [{ required: true, message: '请输入', trigger: 'change' }],
        consignmentNo: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        billType: [{ required: true, message: '请输入', trigger: 'change' }],
        packageType: [{ required: true, message: '请选择', trigger: 'change' }],
        originalBillNumber: [
          {
            required: true,
            validator: this.originalBillNumberCheck,
            trigger: 'blur'
          }
        ],
        coldTemp: [
          {
            required: true,
            validator: this.validatorTemperature,
            trigger: ['blur', 'change']
          }
        ],
        unno: [{ required: true, message: '请输入UN NO', trigger: 'blur' }],
        type: [{ required: true, message: '请输入CLASS NO', trigger: 'blur' }],
        flashTemp: [
          {
            required: true,
            validator: this.validatorDangerFlashPoint,
            trigger: ['blur', 'change']
          }
        ],
        overFrontLength: [
          { required: true, message: '请输入超限-前', trigger: 'blur' }
        ],
        overBackLength: [
          { required: true, message: '请输入超限-后', trigger: 'blur' }
        ],
        overLeftLength: [
          { required: true, message: '请输入超限-左', trigger: 'blur' }
        ],
        overRightLength: [
          { required: true, message: '请输入超限-右', trigger: 'blur' }
        ],
        overHeightLength: [
          { required: true, message: '请输入超限-高', trigger: 'blur' }
        ],
        cargoUnit: [
          { required: true, message: '请选择尺寸单位', trigger: 'change' }
        ],
        ventilationRate: [
          {
            required: true,
            validator: this.validatorVentilationQuantity,
            trigger: ['blur', 'change']
          }
        ],
        loadingPort: [{ required: true, message: '请输入', trigger: 'change' }],
        dischargePort: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        grodischargePortssWeight: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        finalDestination: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        marks: [{ required: true, message: '请输入', trigger: 'blur' }],
        pkgs: [{ required: true, message: '请输入', trigger: 'blur' }],
        hscode: [{ required: true, message: '请输入', trigger: 'blur' }],
        cargoName: [{ required: true, message: '请输入', trigger: 'blur' }],
        grossWeight: [{ required: true, message: '请输入', trigger: 'blur' }],
        measurement: [{ required: true, message: '请输入', trigger: 'blur' }],
        fclLcl: [{ required: true, message: '请输入', trigger: 'blur' }],
        shipper: [{ required: true, message: '请输入', trigger: 'blur' }],
        consignee: [{ required: true, message: '请输入', trigger: 'blur' }],
        notifyPerson: [{ required: true, message: '请输入', trigger: 'blur' }],
        secondPerson: [{ required: true, message: '请输入', trigger: 'blur' }],
        seviceType: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.data.seviceType.length) {
                callback(new Error('请勾选复选框'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    validateOnlyNumberTwo,
    validateNumber,
    // 校验闪点
    validatorDangerFlashPoint(rule, value, callback) {
      let allFieldsFilled = true
      if (!this.data.flashTemp || !this.data.flashTempUnit) {
        allFieldsFilled = false
      }
      if (!allFieldsFilled) {
        callback(new Error('闪点和单位不能为空'))
      } else {
        callback()
      }
    },
    // 校验冷藏温度
    validatorTemperature(rule, value, callback) {
      let allFieldsFilled = true
      if (!this.data.coldTemp || !this.data.coldTempUnit) {
        allFieldsFilled = false
      }
      if (!allFieldsFilled) {
        callback(new Error('冷藏的温度和单位不能为空'))
      } else {
        callback()
      }
    },
    // 校验通风量
    validatorVentilationQuantity(rule, value, callback) {
      let allFieldsFilled = true
      if (!this.data.ventilationRate || !this.data.ventilationRateUnit) {
        allFieldsFilled = false
      }
      if (!allFieldsFilled) {
        callback(new Error('通风量和单位不能为空'))
      } else {
        callback()
      }
    },
    originalBillNumberCheck(rule, value, callback) {
      if (!this.data.originalBillNumber || !this.data.originalBillCopyNumber) {
        callback(new Error('请填写正副本'))
      } else {
        callback()
      }
    },
    validatorBox(rule, value, callback) {
      let allFieldsFilled = true
      for (const iterator of this.data.containerSums) {
        if (!iterator.ctnType || iterator.ctnDigit) {
          allFieldsFilled = false
          break
        }
      }
      if (!allFieldsFilled) {
        callback(new Error('请填写箱型和箱量'))
      } else {
        callback()
      }
    },
    // 展开收齐
    expanIcon() {
      this.expand = !this.expand
    },
    moveTableData(row) {
      let newArr = this.data.containerSums.filter((item) => item.id != row.id)
      this.data.containerSums = newArr
    },
    // 切换通知人
    changeValue(val) {
      if (val == 1) {
        this.isFirst = true
      } else {
        this.isFirst = false
      }
    },
    // 当前选择的属于哪个类型
    async openBLDialog(type) {
      // if (this.data.requester) {
      // let res = await this.$http.get('/api/crcontactcompany/query', {
      //   PageIndex: 1,
      //   PageSize: 50,
      //   businessCategory: '',
      //   code: this.data.requesterCode
      // })
      // let id = ''
      // for (const iterator of res.content) {
      //   if (iterator.comCode == this.data.requesterCode) {
      //     id = iterator.id
      //   }
      // }
      this.$refs.BLDialog.open(type)
      // } else {
      //   this.$message.error('请选择委托单位')
      // }
    },
    // 保存船代的code
    setShipingAgentCode(item) {
      this.data.shipingAgentCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 委托单位下拉选择的option
     */
    setRequesterCode(item) {
      this.data.requesterCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 订舱单位下拉选择的option
     */
    setBookingPartyCode(item) {
      this.data.bookingPartyCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 订舱代理下拉选择的option
     */
    setBookAgentCodeCode(item) {
      this.data.bookAgentCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 装货港下拉选择的option
     */
    setLoadingPortCode(item) {
      this.data.loadingPortCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 中转港下拉选择的option
     */
    setTransshipmentPortCode(item) {
      this.data.transshipmentPortCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 装货地点港下拉选择的option
     */
    setReceiptPlaceCode(item) {
      this.data.receiptPlaceCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 卸货港下拉选择的option
     */
    setDischargePortCode(item) {
      this.data.dischargePortCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 卸货地点下拉选择的option
     */
    setUnloadingPlaceCode(item) {
      this.data.unloadPlaceCode = item.rigthName
    },
    /**
     * 将option.rigthName
     * @param {object} item - 目的地下拉选择的option
     */
    setFinalDestinationCode(item) {
      this.data.finalDestinationCode = item.rigthName
    },
    /**
     * 选择收发货人选取
     * @param {object} bldata - 组件选取数据
     */
    getBLTitle(bldata, type) {
      switch (type) {
        case '发货人':
          this.data.shipper = bldata
          break
        case '收货人':
          this.data.consignee = bldata
          break
        case '通知人':
          this.data.notifyPerson = bldata
          break
      }
    },
    /**
     * 添加用箱信息按钮点击事件
     */
    async addUseBoxInfo() {
      let outFlag = true
      for (let i = 0; i <= this.data.containerSums.length - 1; i++) {
        await this.$refs.baseDataForm.validateField(
          ['containerSums.' + i + '.ctnType'],
          (value) => {
            if (!value) {
              outFlag = false
            }
          }
        )
      }
      if (outFlag) {
        this.data.containerSums.push({
          id: 0,
          bookingId: 0,
          ctnType: '',
          ctnDigit: 1,
          isDeleted: false,
          ctnOwner: ''
        })
      } else {
        this.$message.error('请填写箱型和箱量')
      }
    },
    /**
     * 将option.label传值给tradelaneName
     * @param {object} data - 航线选择的option
     */
    getTradelaneName(data) {
      this.data.tradelaneName = data.label
    },
    /**
     *  品名描述转大写
     * @param {string} data
     */
    upperCargoDescription(data) {
      this.data.cargoDescription = data.toUpperCase()
    },
    /**
     *  品名描述转大写
     * @param {string} data
     */ upperCargoDescription(data) {
      this.data.cargoDescription = data.toUpperCase()
    },
    /**
     *  唛头转大写
     * @param {string} data
     */
    uppermarks(data) {
      this.data.marks = data.toUpperCase()
    },
    /**
     * 数字输入框禁止输入e 和禁止.（小数）
     * @param {string} e
     */
    parseInput(e) {
      let key = e.key
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    foldService() {
      //折叠业务信息
      this.serviceInfoIsShow = !this.serviceInfoIsShow
    },
    foldAllocation() {
      this.allocationInfoIsShow = !this.allocationInfoIsShow
      console.log(this.allocationInfoIsShow, 'this.allocationInfoIsShow')
    },
    // expandAllocation() {
    //   this.allocationInfoIsShow = 'block'
    // },
    foldUseBox() {
      this.useBoxInfoIsShow = !this.useBoxInfoIsShow
    },
    // expandUseBox() {
    //   this.useBoxInfoIsShow = 'block'
    // },
    foldGoods() {
      this.goodsInfoIsShow = !this.goodsInfoIsShow
    },
    // expandGoods() {
    //   this.goodsInfoIsShow = 'block'
    // },
    foldBooker() {
      this.bookerInfoIsShow = !this.bookerInfoIsShow
    },
    // expandBooker() {
    //   this.bookerInfoIsShow = 'block'
    // },
    foldOperate() {
      this.operateInfoIsShow = !this.operateInfoIsShow
    }
  },
  mounted() {},
  created() {}
})
</script>

<style lang="scss" scoped>
.el-textarea__inner {
  line-height: 1.2 !important;
}
@media only screen and (max-width: 1800px) {
  .hwzl {
    flex: 0 0 30%;
    max-width: auto;
  }

  .kf {
    flex: 0 0 20%;
    max-width: auto;
  }
}

@media only screen and (max-width: 1450px) {
  .hwzl {
    flex: 0 0 40%;
    max-width: auto;
  }

  .kf {
    flex: 0 0 10%;
    max-width: auto;
  }
}

.container {
  :deep(.el-form-item) {
    margin: 0;
  }

  :deep(.el-row) {
    margin-bottom: 8px;
  }

  .middle-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background: #f5f8f7;
    padding: 2px 8px;

    .label {
      // border-left: 2px solid #5d9df5;
      // margin-left: 12px;
      // padding-left: 4px;
      // color: #000000;
      // font-family: PingFang SC;
      // font-weight: bold;
      // font-size: 14px;
      // letter-spacing: 0px;
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .tempalte-text {
      color: #5a9cf8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      letter-spacing: 0px;
      margin-left: 12px;
      cursor: pointer;
    }

    .fold,
    .expand {
      color: #5e9ef5;
      cursor: pointer;
    }

    .btn {
      cursor: pointer;
      color: #0063b9;
      margin: 0 16px 0 8px;
    }

    :deep(.el-checkbox) {
      margin-left: 16px;
    }
  }
  .no-data {
    width: 100%;
    margin-bottom: 16px;
    color: #000000;
    opacity: 0.4;

    font-family: PingFang SC;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0px;
    text-align: center;
  }

  .message-input-container {
    width: 100%;
    // padding: 8px 12px 0px;
    // border-top: 8px solid #f8f8f8;
    :deep(.el-table .el-table__header-wrapper th) {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
    }

    .expand-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      span {
        color: #5a9cf8;
        font-family: PingFang SC;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        margin-right: 4px;
      }
    }
    .rotate {
      transform: rotate(-180deg);
    }
    .collapse {
      transition: all 0.5s ease;
    }
    .no-bottom {
      margin-bottom: 0px;
    }
  }

  :deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0 8.5px;
    background-color: #f8f8f8;
  }

  .no-border-top {
    border-top: none;
  }

  .middle-box:not(.special) {
    justify-content: space-between;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;

    .first-title {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
      cursor: pointer;
    }

    .sencond-title {
      color: #000000;
      opacity: 0.4;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
      cursor: pointer;
    }
  }

  .responsiveLayout {
    width: 100%;
    display: flex;
  }

  ::v-deep .el-input-number__decrease {
    background-color: #fff;
    border-right: none;
  }
  ::v-deep .el-input-number__increase {
    background-color: #fff;
    border-left: none;
  }

  .choice {
    color: #5a9cf8;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    cursor: pointer;
  }

  .flex-item-label {
    color: rgba(0, 0, 0, 0.8470588235);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 24px;
    width: 80px;
    text-align: right;
    margin-right: 8px;
    flex: 0 0 80px;
  }

  .flex-container {
    display: flex;
    justify-content: flex-start;
  }

  .box-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .box-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .delete-icon {
    position: absolute;
    top: -5px;
    right: -4px;
    z-index: 100;
    color: #c5c5c5;
    cursor: pointer;
  }

  .box-item-fill {
    margin-right: 8px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .addUseBoxInfo {
    color: #6ba5f6;
    cursor: pointer;
    width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    margin: 12px 0 10px 0px;
    .addFont {
      margin-left: 3px;
      line-height: 21px;
    }
  }

  .add-use-box-info-new {
    color: #6ba5f6;
    cursor: pointer;
    width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    margin-left: 4px;
    flex: 0 0 50px;
    .addFont {
      margin-left: 3px;
      line-height: 24px;
    }
  }
}
.input-number-style {
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 2px 8px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
}

.table-header::before {
  content: '*';
  color: #f56c6c;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  left: 11px;
}

.table-header-other::before {
  content: '*';
  color: #f56c6c;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  left: 22px;
}

:deep(.el-form-item--small .el-form-item__label) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0px;
}

:deep(.el-form-item.is-error .el-checkbox__input .el-checkbox__inner) {
  border-color: #f56c6c;
}
:deep(.el-checkbox.el-checkbox--small) {
  margin-right: 12px;
}
</style>
